<template>
	<view class="container">
		<nav-bars ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed"
			title="订单详情"></nav-bars>
		<view class="top-bg">
			<!-- <navBar isBack backColor="#fff" title="订单详情" color="#fff" background="transprant"></navBar> -->
			<!-- <nav-bars  bgColor="#fff" fontColor="#000" title="生成海报"></nav-bars> -->
			
			<!-- 申述状态 -->
			<view class="title" v-if="appeal_id">
				<text class="iconfont icon-time" style="font-size:40rpx;margin-right:10rpx;color:#fff;"></text>
				<text class="pay">{{appealStatus[appealDetail.status]}}</text>
			</view>
			<!-- 普通订单状态 -->
			<view class="title" v-else>
				<text class="iconfont icon-time" style="font-size:40rpx;margin-right:10rpx;color:#fff;"></text>
				<text class="pay">{{status[orderdetail.status]}}</text>
			</view>
			<!-- <view class="time" v-if="orderdetail.status==3">
				还剩<countdown :startTime="startTime" :endTime="enTime" style="display: inline-block;" />自动关闭订单
			</view> -->
		</view>
		<view class="content">
			<!-- 申述信息 -->
			<view class="contract" v-if="appeal_id">
				<view class="title" style="margin-bottom: 20rpx;">
					申述信息
				</view>
				<view class="appealInfo">
					<text>申述类型</text>
					{{appealDetail.appeal_type}}
				</view>
				<view class="appealInfo">
					<text>备注内容</text>
					<view class="mediaBox">
						<view>{{appealDetail.appeal_desc}}</view>
						<view class="mediaItem" v-if="appealDetail.type==1">
							<view v-for="(item,index) in appealDetail.media">
								<image @click="toViewImg(index,4)" :src="item.path" mode=""></image>
							</view>
						</view>
						<view class="mediaItem active" v-else-if="appealDetail.type==2">
							<view style="width: 100%;">
								<video :src="appealDetail.media[0].path" controls></video>
							</view>
						</view>
					</view>
				</view>
				<view class="imgTag" v-if="appealDetail.is_platform==1">
					<image :src="`${baseImg}/static/adminShop/appeal/ptjr.png`" mode=""></image>
				</view>
			</view>	
			
			<view class="detail">
				<view class="detail-content">
					<view class="is_back" v-if="orderdetail.is_back==1">已回退</view>
					<view class="product df-bt">
						<view class="product-info df-ct">
							<image :src="orderdetail.avatar.path || 'https://manager.ryz1620.com/static/my/avator.png'" mode="" class="product-img"></image>
							<view class="name">
								<view class="name-top">{{orderdetail.designer_name}}</view>
								<view class="phone">{{orderdetail.designer_phone}}</view>
							</view>
						</view>
						<view class="g_icon iconfont iconhuaban74" @click="callPhone(orderdetail.designer_phone)"></view>						
					</view>
					<view class="top">
						<view class="size df-bt gg">
							<view class="">
								<view class="t">户型</view>
								<view>{{orderdetail.house_type}}</view>
							</view>
							<view class="" style="text-align: center;">
								<view class="t">面积</view>
								<view>{{orderdetail.house_area}}m²</view>
							</view>
							<view class="right">
								<view class="t">小区</view>
								<view>{{orderdetail.estate}}</view>
							</view>
						</view>
						<view class="address">
							<view class="address-title t">
								装修地址
							</view>
							<view class="address-detail">
								{{orderdetail.province}}{{orderdetail.city}}{{orderdetail.district}}
							</view>
						</view>						
					</view>
				</view>				
			</view>
			<view class="contract">
				<view class="title">
					订单合同
				</view>
				<view class="upload" v-if="Array.isArray(orderdetail.contract_thumb_url)">
					<view class="imgBox" v-for="(item,index) in orderdetail.contract_thumb_url" :key="index" @click="toViewImg(index,1)">
						<image :src="item.path" mode=""></image>
						<!-- <image :src="`${baseimg}/static/constr/remove.png`" @click="removeImg(index)" mode=""></image> -->
					</view>
					<!-- <view class="uploadBtn" @click="uploadFN(1)">+<span>图片/PDF</span></view> -->
				    <!-- <u-upload ref="" :on-change="handleChange" :auto-upload="false" upload-text="图片/PDF"></u-upload> -->
				</view>
				<view class="upload" v-else>
					<view class="imgBox" @click="toViewImg(0,1)">
						<image :src="orderdetail.contract_thumb_url.path" mode=""></image>
					</view>
				</view>
			</view>	
			<view class="contract">
				<view class="title">
					设计图纸
				</view>
				<view class="upload" v-if="Array.isArray(orderdetail.draw_thumb_url)">
					<view class="imgBox" v-for="(item,index) in orderdetail.draw_thumb_url" :key="index" @click="toViewImg(index,2)">
						<image :src="item.path" mode=""></image>
						<!-- <image :src="`${baseimg}/static/constr/remove.png`" @click="constrImgDel(index)" mode=""></image> -->
					</view>
					<!-- <view class="uploadBtn" @click="uploadFN(2)">+<span>添加图纸</span></view> -->
				    <!-- <u-upload ref="" :on-change="handleChange" :auto-upload="false" upload-text="图片/PDF"></u-upload> -->
				</view>
				<view class="upload" v-else>
					<view class="imgBox" @click="toViewImg(0,2)">
						<image :src="orderdetail.draw_thumb_url.path" mode=""></image>
					</view>
				</view>
			</view>	
			<view class="contract">
				<view class="title">
					选材单
				</view>
				<view class="upload" v-if="Array.isArray(orderdetail.material_thumb_url)">
					<view class="imgBox" v-for="(item,index) in orderdetail.material_thumb_url" :key="index" @click="toViewImg(index,2)">
						<image :src="item.path" mode=""></image>
						<!-- <image :src="`${baseimg}/static/constr/remove.png`" @click="constrImgDel(index)" mode=""></image> -->
					</view>
					<!-- <view class="uploadBtn" @click="uploadFN(2)">+<span>添加图纸</span></view> -->
				    <!-- <u-upload ref="" :on-change="handleChange" :auto-upload="false" upload-text="图片/PDF"></u-upload> -->
				</view>
				<view class="upload" v-else>
					<view class="imgBox" @click="toViewImg(0,3)">
						<image :src="orderdetail.material_thumb_url.path" mode=""></image>
					</view>
				</view>
			</view>	
			<view class="message">
				<view class="title">
					订单信息
				</view>
				<view class="appeal df">
					<text class="left">客户诉求</text>
					<text class="right-appeal">{{orderdetail.remark}}</text>
				</view>
				<view class="number df">
					<text class="left">订单编号</text>
					<text class="center">{{orderdetail.order_no}}</text>
					<text class="copy" @click="copy(orderdetail.order_no)">复制</text>
					
				</view>
				<view class="time df">
					<text class="left">下单时间</text>
					<text class="right">{{orderdetail.create_time |formatDates}}</text>
				</view>
			</view>
			<view class="message" v-if="orderdetail.status!=1 && orderdetail.status!=2">
				<view class="title">
					支付信息
				</view>
				<view class="commission df">
					<text class="left">合同金额 </text>
					<text class="right">¥ {{orderdetail.contract_price}}</text>
				</view>
				<view class="appeal">
					<text class="left">支付次数</text>
					<text class="right-appeal">{{orderdetail.pay_progress.length}}</text>
				</view>
				<view class="time df">
					<text class="left">支付比例</text>
					<text class="right">{{orderdetail.pay_rule?orderdetail.pay_rule.replace(/,/g,'、'):''}}</text>
				</view>
				<!-- 支付比例 -->
				<view class="payNumList">
					<view class="item" v-for="(item,index) in orderdetail.pay_progress" :key="index">
						<view class="info">
							<view class="num">{{index+1}}</view>
							{{item.rate*100}}%
							<text>(￥{{item.amount}})</text>
						</view>
						<template v-if="orderdetail.status==3 || orderdetail.status==4">
							<view class="btn" :class="{'active':item.pay_status==1}" @click="payModel(orderdetail.order_no,item.pay_status)">{{item.pay_status==1?'去付款':item.pay_status==2?'已付款':''}}</view>
						</template>
						<template v-else>
							<view class="btn">{{item.pay_status!=2?'未付款':'已付款'}}</view>
						</template>
					</view>
				</view>
				<!-- 备注 -->
				<view class="remarksBox">
					<view class="title">
						备注
					</view>
					<view class="textarea">
						<textarea disabled v-model="orderdetail.pay_rule_desc" maxlength="1000" placeholder-style="color:#D8D8D8" placeholder="请填写备注~"/>
					</view>
				</view>
				
				<!-- <view class="money df" v-if="orderdetail.is_many_way==1 && orderdetail.status==3">
					<text class="left">待付定金</text>
					<text class="total-money">¥ {{orderdetail.deposit_price}}</text>
				</view>
				<template v-if="orderdetail.is_many_way==1 && orderdetail.status==4">
					<view class="money df">
						<text class="left">已付定金</text>
						<text class="total-money">¥ {{orderdetail.deposit_price}}</text>
					</view>
					<view class="money df">
						<text class="left">待付尾款</text>
						<text class="total-money">¥ {{orderdetail.deposit_price}}</text>
					</view>
				</template>
				<template v-if="orderdetail.is_many_way==1 && orderdetail.status==5">
					<view class="money df">
						<text class="left">已付定金</text>
						<text class="total-money">¥ {{orderdetail.deposit_price}}</text>
					</view>
					<view class="money df">
						<text class="left">已付尾款</text>
						<text class="total-money">¥ {{orderdetail.deposit_price}}</text>
					</view>
				</template> -->
			</view>
		</view>
		
		<view class="footer" v-if="appeal_id">
			<view class="btn" v-if="appealDetail.status!=2 && appealDetail.status!=3">
				<button type="default" class="btn-text" @click="toResolve">已解决</button>
				<!-- <button type="default" class="btn-text" @click="toBackOrder">回退</button> -->
				<button type="default" v-if="appealDetail.is_platform==0" class="btn-text" @click="toIntervene">平台介入</button>
				<button type="default" class="btn-text active" @click="toWithdraw">撤回申诉</button>
			</view>
			<view class="btn" v-else>
				<button style="width: 190rpx;" type="default" class="btn-text" @click="callPhone(appealDetail.partner_phone)">联系设计师</button>
			</view>
		</view>
		<view class="footer" v-else>
			<button v-if="orderdetail.status == 5 && orderdetail.is_appeal==0" type="default" class="btn-text" @click="toAppealAdd">申诉</button>
			<button v-if="orderdetail.status == 4" type="default" class="btn-text" @click="toBackOrder()">回退</button>
			<!-- #ifndef MP-WEIXIN -->
			<button type="default" class="btn-text" @click="toCustomer(orderdetail.designer_id)">联系客服</button>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button type="default" class="btn-text" v-if="!config_id && !config_url" @click="toCustomer(orderdetail.designer_id)">联系客服</button>
			<button type="default" class="btn-text" v-else @click="gitpouchatshow">联系客服</button>
			<!-- #endif -->
			<button v-if="orderdetail.status == 4 && orderdetail.pay_status == 1" type="default" class="btn-text active" @click="toConfirm">确认完工</button>
			<button v-if="orderdetail.status == 1 && orderdetail.status == 2 && orderdetail.status == 3" type="default" class="btn-text" @click="toCancelOrder">关闭订单</button>
			<!-- <button v-if="orderdetail.status == 3" type="default" class="btn-text" @click="payModel(orderdetail.order_no)">付款</button> -->
			<!-- <button v-if="orderdetail.status == 4 && orderdetail.is_many_way==1" type="default" class="btn-text" @click="payModel(orderdetail.order_no)">付款</button> -->
		</view>
		
		<!-- 二维码 -->
		<view class="qrcodepop" :style="showModal?'':'display:none;'">
			<view class="qrcodecont">
				<view class="qrname">
					<view>核销二维码</view>
					<view><canvas  canvas-id="myQrcode"></canvas></view>
				</view>
				<view class="iconfont icon-close" @click="handleHideCodeClick"></view>
			</view>
		</view>
		
		<!-- 微信客服 -->
		<view class="pouchat" v-if="pouchatshow">
		  <view class="poucont">	
			<view class="chatlist">
				<view class="chatml" @click="gitwxchat()" v-if="config_url">
					<image src="https://manager.ryz1620.com/static/my/wxchat.png" mode="widthFix"></image>
					<text class="t1">在线微信客服</text>
					<text class="t2">可直接联系客服</text>
				</view>
				<view class="chatml" v-if="config_id">
					<cell class="cell-service" bind:startmessage='startmessage' bind:completemessage="completemessage" :plugid="config_id"/>
					<image src="https://manager.ryz1620.com/static/my/codechat.png" mode="widthFix"></image>
					<text class="t1">添加微信客服</text>
					<text class="t2">扫微信二维码</text>
				</view>
			</view>
			<view class="iconfont icon-close" @click="wxCodeClick"></view>
		  </view>	
		</view>
	</view>
</template>

<script>
	import countdown from "@/components/cz-countdown/cz-countdown.vue"
	import service_design from '@/service/design'
	import service_mall from '@/service/mall.js'
	const qrCode = require('@/utils/weapp-qrcode.js')
	export default {
		components: {
			countdown,
			// #ifdef MP-WEIXIN
				"cell": "plugin://contactPlugin/cell",
			// #endif
		},
		data() {
			return {
				status: {
					0: "已取消",
					1: "待接单",
					2: "待处理",
					3: "待付款",
					4: "待设计",
					5: "已完成",
					6: "已关闭"
				},
				// 申述订单状态
				appealStatus:{
					0: "待处理",
					1: "处理中",
					2: "已解决",
					3: "已撤回"
				},
				baseImg:'http://manager.ryz1620.com',
				startTime:'',
				enTime:'',
				list:{},
				orderdetail:'',
				order_id:null, // 订单id
				code:'',
				showModal: false,
				tapIndex:'',
				terminal:"",
				scrollTop: 0,
				config_id:'',
				config_url:'',
				pouchatshow:false,
				appeal_id:'',//申述id
				appealDetail:{}, //申述详情
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			this.$utils.getUrl()
			this.order_id = options.orderid;
			this.appeal_id = options.appeal_id;
			
			//#ifdef MP-WEIXIN
				this.terminal = "wxapplet";
			//#endif
		},
		onShow() {
			this.getdata()
			if(this.appeal_id){
				this.getAppealDetail()
			}
		},
		filters: {
			formatDates(value) {
				  let date = new Date(parseInt(value) * 1000);
				  let y = date.getFullYear();
				  let m = date.getMonth() + 1;
				  m = m < 10 ? "0" + m : m;
				  let d = date.getDate();
				  d = d < 10 ? "0" + d : d;
				  let h = date.getHours();
				  h = h < 10 ? "0" + h : h;
				  let minute = date.getMinutes();
				  let second = date.getSeconds();
				  minute = minute < 10 ? "0" + minute : minute;
				  second = second < 10 ? "0" + second : second;
				  return y +"-" + m + "-" + d + " " + h + ":" + minute + ":"+second;
			},
				formatDate(value) {
					var date = new Date(value);
					//date.setTime(value);
					var month = date.getMonth() + 1;
					var hours = date.getHours();
					if (hours < 10)
						hours = "0" + hours;
					var minutes = date.getMinutes();
					if (minutes < 10)
						minutes = "0" + minutes;
					var time = date.getFullYear() + "/" + month + "/" + date.getDate() +
						" " + hours + ":" + minutes;
					return time;
					}
		},
		methods:{
			handleFile(event){
				console.log(event,"照片信息")
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// 获取企业微信callme配置
			gitConfig() {
				service_mall.getCallMeConfig({ partner_type: 'designer', partner_id: this.orderdetail.designer_id }).then(res => {
					if (res.code == 1) {
						this.config_id = res.data.config_id;
					}
				});
			},
			gitwxConfig() {
				service_mall.getwxMeConfig({ partner_type: 'designer', partner_id: this.orderdetail.designer_id  }).then(res => {
					if (res.code == 1) {
						this.config_url = res.data.url;
					}
				});
			},
			gitpouchatshow(){
				this.pouchatshow = true
			},
			wxCodeClick(){
				this.pouchatshow = false
			},
			gitwxchat(){
				wx.openCustomerServiceChat({
				  extInfo: {url: this.config_url},
				  corpId: this.$env.CORPID,
				  success(res) {}
				})
			},
			toCustomer(id){
				uni.navigateTo({
					url:"/pages_customer/pages/index?partner_type=designer&partner_id="+id
				})
			},
			copy(value){
			  //提示模板
			    uni.setClipboardData({
			      data:value,//要被复制的内容
			      success:()=>{//复制成功的回调函数
					console.log('复制成功')
			      }
			    });
			},
			
			// 订单详情
			getdata() {
				uni.showLoading('加载中')
				service_design.getorderdata({
					 order_id:this.order_id
				})
					.then(res => {
						if(res.code == 1){
							uni.hideLoading();
							let endata = res.data.handle_time + 86340
							 this.startTime= this.$options.filters.formatDate(new Date())
							 this.enTime= this.$options.filters.formatDates(endata)
							 this.orderdetail = res.data
							 this.gitConfig()
							 this.gitwxConfig()
						}
					})
					.catch(err => {
						
					})
			},
			
			// 获取申述详情
			getAppealDetail(){
				service_design.getAppealDetail({appeal_id:this.appeal_id}).then(res=>{
					console.log(res,'申述详情')
					if(res.code==1){
						this.appealDetail = res.data?res.data:{}
					}
				})
			},
			
			// 申诉按钮
			toAppealAdd(){
				let params = encodeURIComponent(JSON.stringify(this.orderdetail))
				uni.navigateTo({
					url:'/pages_decoration/pages/appealAdd/add?data='+params+'&orderType=desginer'
				})
			},
			
			// 平台介入按钮
			toIntervene(){
				uni.showModal({
					title:'确定平台介入该申诉吗？',
					success:res=>{
						if(res.confirm){
							let params = {
								appeal_id:this.appeal_id
							}
							service_design.toIntervene(params).then(res=>{
								if(res.code==1){
									uni.showToast({
										title:'平台介入成功',
										icon:'success'
									})
									this.getAppealDetail()
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			},
			
			// 撤回申诉按钮
			toWithdraw(){
				uni.showModal({
					title:'确定撤回该申诉吗？',
					success:res=>{
						if(res.confirm){
							let params = {
								appeal_id:this.appeal_id
							}
							service_design.toWithdraw(params).then(res=>{
								if(res.code==1){
									uni.showToast({
										title:'撤回成功',
										icon:'success'
									})
									this.getAppealDetail()
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			},
			
			// 解决申诉按钮
			toResolve(){
				uni.showModal({
					title:'确定解决该申诉吗？',
					success:res=>{
						if(res.confirm){
							let params = {
								appeal_id:this.appeal_id
							}
							service_design.toResolve(params).then(res=>{
								if(res.code==1){
									uni.showToast({
										title:'已解决',
										icon:'success'
									})
									this.getAppealDetail()
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			},
			
			// 确认完工按钮
			toConfirm(){
				uni.showModal({
					content:'是否确定满意完工？',
					success:res=>{
						if(res.confirm){
							service_design.confirmOrder({order_id:this.order_id}).then(res=>{
								console.log(res,'确定完工')
								if(res.code==1){
									uni.showToast({
										title:'已确定完工',
										icon:'success'
									})
									setTimeout(function(){
										uni.navigateBack({
											delta:1
										})
									},500)
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			},
			
			// 回退
			toBackOrder(id){
				uni.showModal({
					content:'确定回退该订单吗？',
					success:res=>{
						if(res.confirm){
							let params = {
								order_id:this.order_id,
								is_back:1
							}
							service_design.toBackOrder(params).then(res=>{
								console.log(res,'回退结果')
								if(res.code==1){
									uni.showToast({
										title:'回退成功',
										icon:'success'
									})
									setTimeout(function(){this.getdata()},500)
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
				
			},
			
			// 图片预览
			toViewImg(index,type) { //type=1合同，type=2施工图纸,type=3选材单，type=4申述图片
				let imgArr = type==1?this.orderdetail.contract_thumb_url:type==2?this.orderdetail.draw_thumb_url:type==3?this.orderdetail.material_thumb_url:this.appealDetail.media;
				let urlType = Array.isArray(imgArr)
				console.log(imgArr,'需要预览的图片')
				let imgUrl = []
				if (urlType) {
					imgArr.map(item => {
						imgUrl.push(item.path)
					})
				} else {
					imgUrl.push(imgArr.path)
				}
				uni.previewImage({
					current: index, //预览图片的下标
					urls: imgUrl //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				});
			},
			
			// 选择支付方式
			payModel(order_code,type){
					if(type!=1){
						return
					}
				    let itemList = [ "微信支付", "线下支付"]
					this.itemList = itemList
			        uni.showActionSheet({
			            itemList: this.itemList,
			            success: (t) => {
							this.tapIndex = t.tapIndex+1
					       this.getpayorder(order_code)	
						}
			        });
			 },
			initQrCode:function(){
				new qrCode('myQrcode', {
					text: this.code,
					width: 160,
					height: 160,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H
				})
			},
			handleShowCodeClick:function(){
				this.showModal = true
				this.$nextTick(function(){
					this.initQrCode()
				})
			},
			handleHideCodeClick:function(){
				this.showModal = false
			},
			getpayorder(order_code){
				service_mall.getpay({
					order_no:order_code,
					type:'designer_order',
					pay_type:this.tapIndex
					}).then(res=>{
					if(res.code == 1){
						let data = res.data
						let that = this
					    if(this.tapIndex == 1){	
							if(this.terminal == 'wxapplet'){
								uni.requestPayment({
									appId:res.data.appId,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									paySign: res.data.paySign,
									signType: res.data.signType,
									timeStamp: res.data.timeStamp,
									success: (suc) => {
										// uni.navigateTo({
										// 	url: "/pages_design/pages/design/order/sucess?type=1" + '&orderid=' + that.order_id
										// })
									},
									fail: (err) => {
										uni.navigateTo({
											url: "/pages_design/pages/design/order/sucess?type=0" + '&orderid=' + that.order_id
										})
									}
								});
							}else{
								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: {
										"appid":res.data.appid,
										"partnerid": res.data.partnerid,
										"prepayid": res.data.prepayid,
										"noncestr": res.data.noncestr,
										"package": res.data.package,
										"timestamp": res.data.timestamp,
										"sign": res.data.sign,
									},
									success: (suc) => {
										// uni.navigateTo({
										// 	url: "/pages_design/pages/design/order/sucess?type=1" + '&orderid=' + that.order_id
										// })
									},
									fail: (err) => {
										console.log(err,12345)
										uni.navigateTo({
											url: "/pages_design/pages/design/order/sucess?type=0" + '&orderid=' + that.order_id
										})
									}
								});
							}
						}else{
							this.code = res.data.verificationCode
							this.handleShowCodeClick()
						}
										
					}else{
							this.failMsg(res)
					}	
				})
			},
			// 取消订单
			toCancelOrder(){
				uni.showModal({
					content:'确定取消此订单吗？',
					success:res=>{
						if(res.confirm){
							service_design.getordercancel({order_id:this.order_id}).then(res=>{
								if(res.code==1){
									uni.showToast({
										title:'取消成功',
										icon:'success '
									})
									setTimeout(function(){
										uni.navigateBack({
											delta:1
										})
									},500)
								}
							})
						}
					}
				})
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.container{
		.top-bg{
			background:  url(http://manager.ryz1620.com/static/home-personal/personal-bg.png) no-repeat top;
			width: 100%;
			height: 468rpx;
			position: relative;
			/deep/ .u-navbar .u-border-bottom{
						border: 0 !important;
			}
			.title{
				display: flex;
				// margin: 80rpx 0 0 44rpx;
				    padding: 200rpx 0 0 44rpx;
				.icon-shijianxuanzhong{
					width: 40rpx;
					height: 40rpx;
					color: #94e3b4;
					margin-right: 6rpx;
				}
				.pay{
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 36rpx;
					color: #FFFFFF;
				}
			}
			.time{
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 36rpx;
				color: #FFFFFF;
				margin: 6rpx 0 0 44rpx;
			}
		}
		.content{
			position: absolute;
			left: 0;
			top: 340rpx;
			z-index: 1;
			padding: 24rpx 24rpx 200rpx 24rpx;
			width: 100%;
			.detail{
				// padding: 0 24rpx;
				
				.detail-content{
					background-color: #fff;
					padding: 30rpx 24rpx;
					margin-bottom: 22rpx;
					margin-top: 22rpx;
					border-radius: 16rpx;
					position: relative;
					.is_back{
						position: absolute;
						top: 0;
						right: 0;
						width: 90rpx;
						height: 36rpx;
						background-color: #E7AD14;
						border-radius: 0 16rpx 0 16rpx;
						font: 400 22rpx/36rpx PingFang SC;
						text-align: center;
						color: #fff;
					}
					.top{
						padding: 28rpx;
						background: #F8F8F8;
						border-radius: 8rpx;
						color: #505050;
						margin-bottom: 30rpx;
						.size{
							margin-bottom: 40rpx;
							.right{
								display: flex;
								flex-direction: column;
								justify-content: flex-end;
								text-align: right;
								// align-items: right;
								}
						}
						.address{
							
							.address-detail{
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								line-height: 40rpx;
								color: #505050;
							}
						}
							.t {
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 400;
								line-height: 36rpx;
								color: #A0A0A0;
							}
							
						
						
					}
					.product {
						position:relative;
						padding-bottom: 30rpx;
						// padding-top: 22rpx;
						.product-img {
							width: 84rpx;
							height: 84rpx;
							border-radius: 50%;
							margin-right: 20rpx;
							background: #dedede;
						}
						.name{
							.name-top{
								font-size: 26rpx;
								font-weight: 500;
								line-height: 40rpx;
								color: #0A0605;
							}
							.phone{
								font-size: 26rpx;
								font-weight: 400;
								line-height: 40rpx;
								color: #505050;
							}
						}
						
						
					}
					
					.btn-box {
						&:after { display: block; clear: both; content: ''; visibility: hidden; height: 0; }
						.more {
							float: left;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 40rpx;
							color: #A0A0A0;
							padding-top: 10rpx;
						}
						.price-box {
							text-align: right;
							padding: 40rpx 0 22rpx 0;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 20rpx;
							color: #878787;
							.d-price {
								color: #dfb368;
								font-size: 32rpx;
								padding-left: 20rpx;
							}
						}
						.btn {
							// width: 50%;
							// float: right;
							display: flex;
							justify-content:flex-end ;
							align-items: center;
							.btn-text {
								width: 172rpx;
								height: 64rpx;
								background: #FFFFFF;
								border: 2rpx solid #505050;
								opacity: 1;
								border-radius: 32rpx;
								text-align: center;
								line-height: 64rpx;
								color: #505050;
								font-size: 26rpx;
								margin: 0 10rpx;
								position: relative;
								.cell-service{
									position: absolute;
									right: 0;
									bottom: 0;
									left: 0;
									top: 0;
									opacity: 0;
									z-index: 10;
									.cell--bubble{
										width: 100%;
									}
								}
							}
							.active{
								background-color: #DBA954;
								color: #fff;
								border: 0;
							}
						}
						
					}
				}
			}
			.contract{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				position: relative;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				
				// 申述信息
				.appealInfo{
					display: flex;
					font: 500 26rpx/50rpx PingFang SC;
					color: #3D3D3D;
					text{
						flex-shrink: 0;
						margin-right: 35rpx;
						color: #9B9B9B;
					}
					.mediaBox{
						width: 100%;
						.mediaItem{
							width: 100%;
							display: grid;							grid-template-columns: repeat(5, 1fr);							grid-gap: .5rem;
							image{
								width: 80rpx;
								height: 80rpx;
								border-radius: 2rpx;
							}
						}
						.active{
							grid-template-columns: repeat(1, 1fr);
							video{
								width: 80%;
								height: 210rpx;
								border-radius: 8rpx;
							}
						}
					}
				}
				// 申述（平台介入图片）
				.imgTag{
					width: 170rpx;
					height: 140rpx;
					position: absolute;
					top: 0;
					right: 0;
					image{
						width: 100%;
						height: 100%;
					}
				}
				
				.upload{
					margin-top: 40rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.imgBox{
						margin: 0 5rpx 10rpx;
						position: relative;
						width: 200rpx;
						height: 200rpx;
						border-radius: 4rpx;
						image:nth-child(1){
							width: 100%;
							height: 100%;
							border-radius: 4rpx;
						}
						image:nth-child(2){
							width: 50rpx;
							height: 50rpx;
							position: absolute;
							top: 5rpx;
							right: 5rpx;
						}
					}
					.uploadBtn{
						margin: 0 5rpx 10rpx;
						background-color: #F8F8F8;
						border-radius: 4rpx;
						width: 200rpx;
						height: 200rpx;
						font-size: 60rpx;
						display:  flex;
						align-items: center;
						color: #A0A0A0;
						flex-direction: column;
						justify-content: center;
						span{font: 400 22rpx/36rpx PingFang SC;}
					}
				}
			}
			.message{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					margin-bottom: 20rpx;
					color: #0A0605;
				}
				.left{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #A0A0A0;
					margin-right: 10rpx;
					width: 27%;
				}
				.right{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #505050;
				}
				.copy{
					padding: 6rpx 18rpx;
					background-color: rgba(219, 169, 84, 0.1);
					font-size: 18rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 20rpx;
					color: #DBA954;
					border-radius: 18rpx;
					margin-left: 10rpx;
				}
				.total-money{
					color: #DBA954;
				}
				.right-appeal{
					// margin-left: 62rpx;
				}
				.df{
					margin: 20rpx 0;
				}
				// 支付比例列表
				.payNumList{
					.item{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 30rpx 0;
						.info{
							display: flex;
							align-items: center;
							.num{
								width: 35rpx;
								height: 35rpx;
								border: 2rpx solid #A0A0A0;
								border-radius: 50%;
								text-align: center;
								font-size: 22rpx;
								line-height: 30rpx;
								margin-right: 20rpx;
							}
							text{
								color: #DCAB58;
								margin-left: 20rpx;
							}
						}
						.btn{
							color: #DCAB58;
						}
						.active{
							padding: 8rpx 30rpx;
							border-radius: 28rpx;
							color: #fff;
							background: linear-gradient(90deg, #DBA954 0%, #EABA6A 100%);
						}
					}
				}
				// 备注
				.remarksBox{
					// padding: 24rpx;
					background-color: #fff;
					border-radius: 16rpx;
					margin-top: 30rpx;
					.title{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: #0A0605;
					}
					.textarea{
						background: #F8F8F8;
						padding: 24rpx;
						height: 160rpx;
						overflow-y: auto;
						margin-top: 20rpx;
					}
				}
			}
		}
		.footer{
			height: 150rpx;
			width: 100%;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;
			padding: 30rpx;
			display: flex;
			justify-content:flex-end ;
			align-items: center;
			.btn-text {
				width: 172rpx;
				height: 64rpx;
				background: #FFFFFF;
				border: 2rpx solid #505050;
				opacity: 1;
				border-radius: 32rpx;
				text-align: center;
				line-height: 64rpx;
				color: #505050;
				font-size: 26rpx;
				margin: 0 10rpx;
			}
			.btn{display: flex;align-items: center;}
			.active{
				background-color: #DBA954;
				color: #fff;
				border: 0;
				// width: 240rpx;
			}
		}
	}
.df-ct{
	display:flex;
}
.g_icon{
	    display: block;
	    width: 60rpx;
	    height: 60rpx;
	    position: absolute;
	    right: 0;
	    top: 0;
	    font-size: 44rpx;
	    border-radius: 50%;
	    line-height: 60rpx;
	    text-align: center;
}
.gg{
	display:flex;
	view{
		
		flex:1
	}
}	
	.qrcodepop{
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.2);
		z-index: 9999;
		.qrcodecont{
			width: 400rpx;
			position: absolute;
			left: 50%;
			top: 25%;
			margin-left: -200rpx;
			.qrname{
				background: #fff;
				line-height: 80rpx;
				height: 440rpx;
				overflow: hidden;
				padding: 20rpx;
				text-align: center;
				border-radius: 15rpx;
				canvas{
					width: 300rpx;
					height: 300rpx;
					margin: auto;
				}
			}
			.icon-close{
				display: block;
				font-size: 60rpx;
				color: #fff;
				text-align: center;
				margin: 30rpx auto;
			}
		}
	}
	// 客服弹框
		.pouchat{
			position: fixed;
			background: rgba(0,0,0,0.5);
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;
			.poucont{
				position: absolute;
				top:30%;
				left: 15%;
				right: 15%;
				.icon-close{
					width: 80rpx;
					height: 80rpx;
					font-size: 70rpx;
					color: #fff;
					line-height: 80rpx;
					text-align: center;
					margin: 30rpx auto;
				}
			}
			.chatlist{
				background: #fff;
				padding:30rpx;
				border-radius: 10rpx;
			}
			.chatml{
				position: relative;
				padding: 20rpx;
				padding-left: 100rpx;
				min-height: 100rpx;
				.cell-service{
					position: absolute;
					right: 0;
					bottom: 0;
					left: 0;
					top: 0;
					opacity: 0;
					z-index: 10;
					.cell--bubble{
						width: 100%;
					}
				}
				text{
					display: block;
					line-height: 40rpx;
				}
				.t1{
					font-size: 32rpx;
				}
				.t2{
					font-size: 24rpx;
					color: #999;
				}
				image{
					width: 70rpx;
					height: 70rpx;
					position: absolute;
					left: 15rpx;
					top:25rpx;
				}
			}
		}	
</style>

